<template>
  <a-card :bordered="false">
  <div v-show="showAppList">
    <a-spin :spinning="loading">
      <div class="table-operator">
        <a-dropdown>
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="handleAdd('1')">
              <ych-icon type="plus"/>
              {{ $t('m.common.button.add') }}
            </a-menu-item>
            <a-menu-item key="2" @click="handleEdit(selectedGroupId)"
                         v-show="selectedGroupId!='all' && selectedGroupId!=''">
              <ych-icon type="edit"/>
              {{ $t('m.common.button.update') }}
            </a-menu-item>
            <a-menu-item key="3" v-show="selectedGroupId!='all' && selectedGroupId!=''">
              <a-popconfirm :title="$t('m.common.tip.delete_confirm')" @confirm="() => handleDelete(selectedGroupId)">
                <ych-icon type="delete"/>
                {{ $t('m.common.button.delete') }}
              </a-popconfirm>
            </a-menu-item>
          </a-menu>
          <a-button style="margin-left: 8px"> {{$t('m.eform.appgroup.other.group_manage')}}
            <ych-icon type="down"/>
          </a-button>
        </a-dropdown>
        <a-button @click="handleAdd('2',selectedGroupId)" type="primary" icon="plus">{{$t('m.eform.appgroup.other.new_app')}}</a-button>
        <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader"
                  :action="importGroupNew" @change="handleImportGroup" accept=".zip">
          <a-button type="default" icon="import">{{$t('m.eform.appgroup.other.import_new')}}</a-button>
        </a-upload>
        <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader"
                  :action="importGroupOld" @change="handleImportGroup" accept=".zip">
          <a-button type="default" icon="import">{{$t('m.eform.appgroup.other.import_cover')}}</a-button>
        </a-upload>
        <a-button @click="handleDelCache" type="default" icon="delete">{{$t('m.eform.appgroup.other.delete_cache')}}</a-button>

        <div style="float: right">
          <!-- <a-select v-model="keyWordType" style="width: 120px; margin-right: 5px;">
            <a-select-option value="app">{{ $t('m.eform.apptable.entity.appModel') }}</a-select-option>
            <a-select-option value="table">{{ $t('m.eform.apptable.entity.entityModel') }}</a-select-option>
            <a-select-option value="object">{{ $t('m.eform.apptable.entity.erModel') }}</a-select-option>
            <a-select-option value="form">{{ $t('m.eform.appform.common.online_form') }}</a-select-option>
            <a-select-option value="formBpm">{{ $t('m.eform.appform.common.registration_form') }}</a-select-option>
            <a-select-option value="flow">{{ $t('m.eform.apptable.entity.flowModel') }}</a-select-option>
            <a-select-option value="widget">{{ $t('m.eform.appreport.other.report_widget') }}</a-select-option>
            <a-select-option value="dataset">{{ $t('m.eform.appreport.other.report_datase') }}</a-select-option>
            <a-select-option value="view">{{ $t('m.eform.apptable.entity.viewModel') }}</a-select-option>
          </a-select>-->
          <a-input-search style="width: 200px;" :placeholder="$t('m.common.label.guan-jian-zi')" enter-button @search="onSearch"></a-input-search>
        </div>
      </div>

      <a-tabs v-model="selectedGroupId">
        <a-tab-pane :tab="tab.groupName+'('+tab.children.length+')'" v-for="tab in dataSource" :key="tab.id">
          <act-app-card-list :appList="tab.children" :ref="'cardList'+tab.id" @toDetail="toDetail" @editApp="editApp"
                             @delApp="delApp"></act-app-card-list>
        </a-tab-pane>
      </a-tabs>
    </a-spin>
    </div>
    <act-app-group-modal ref="modalForm" @ok="modalFormOk"></act-app-group-modal>
    <act-app-group-tab :groupId="appId" v-if="!showAppList" @toMain="toMain"></act-app-group-tab>

  </a-card>

</template>

<script>

  import { getAction, deleteAction } from '@/api/manage'
  import ActAppGroupModal from './modules/ActAppGroupModal'
  import ActAppCardList from './ActAppCardList'
  import ActAppGroupTab from './ActAppGroupTab'
  import YchConstant from "@/api/YchConstant";
  import LocaleUtil from "../../utils/LocaleUtil";
  import TokenStorageUtil from "../../utils/TokenStorageUtil";

  export default {
    name: 'ActAppGroupList',
    components: {
      ActAppGroupModal,
      ActAppCardList,
      ActAppGroupTab,
    },
    data () {
      return {
        //token header
        tokenHeader: { 'X-Access-Token': TokenStorageUtil.get() },
        url: {
          allCategoryList: YchConstant.PREFIX_EFORM + '/manage/actAppGroup/getAllCategoryList',
          delete: YchConstant.PREFIX_EFORM + '/manage/actAppGroup/delete',
          deleteBatch: YchConstant.PREFIX_EFORM + '/manage/actAppGroup/deleteBatch',
          importGroup: YchConstant.PREFIX_EFORM + '/manage/actAppGroup/importGroup',
          delCache: YchConstant.PREFIX_EFORM + '/manage/actAppGroup/delCache',
        },
        expandedRowKeys: [],
        groupId: null,
        appId: null,
        pidField: 'parentId',
        currSelected: {},
        selectedKeys: [],
        dataSource: [],
        showAppList: true,
        selectedGroupId: 'all',
        currOperGroupType: '',
        loading: false,
        keyWordType: 'app',
      }
    },
    computed: {
      importGroupNew: function () {
        return `${bootConfig[process.env.NODE_ENV].VUE_APP_API}${this.url.importGroup}?parentId=${this.selectedGroupId}&type=new`
      },
      importGroupOld: function () {
        return `${bootConfig[process.env.NODE_ENV].VUE_APP_API}${this.url.importGroup}?parentId=${this.selectedGroupId}&type=old`
      }
    },
    created () {
      this.loadData()
    },
    methods: {
      onSearch(value) {
        this.loadData(value)
      },
      loadData (keyWord) {
        this.loading = true
        let param = {}
        param.parentId = '0'
        param.groupType = '1'
        if (keyWord) {
          param.keyWord = keyWord
        }
        getAction(this.url.allCategoryList, param).then(res => {
          if (res.success) {
            this.dataSource = res.result
          } else {
            this.messageUtil.warning(res.message)
          }
        }).finally(() => {
          this.loading = false
        })
      },
      modalFormOk (formData, arr) {
        this.loadData()
      },
      editOk (formData, arr) {
        this.loadData()
      },
      addOk (formData, arr) {
        this.loadData()
      },
      handleEdit: function (selectedGroupId) {
        let currSelected = this.dataSource.filter(item => item.id == selectedGroupId)
        if (currSelected.groupType == '2') {
          this.currOperGroupType = '2'
        } else {
          this.currOperGroupType = '1'
        }
        this.$refs.modalForm.edit(currSelected[0])
        this.$refs.modalForm.title = this.$t('m.common.button.update')
        this.$refs.modalForm.disableSubmit = false
      },
      handleAdd: function (groupType, parentId) {
        if (groupType == '2') {
          this.currOperGroupType = '2'
        } else {
          this.currOperGroupType = '1'
        }
        this.$refs.modalForm.add(groupType, parentId)
        this.$refs.modalForm.title = this.$t('m.common.button.add')
        this.$refs.modalForm.disableSubmit = false
      },
      handleDelete: function (selectedGroupId) {
        if (!this.url.delete) {
          this.messageUtil.error(this.$t('m.eform.formDesign.label.qing-she-zhi-urldelete-shu-xing'))
          return
        }
        this.currOperGroupType = '1'
        const that = this
        deleteAction(that.url.delete, { id: selectedGroupId, groupType: '1' }).then((res) => {
          if (res.success) {
            that.messageUtil.success(res.message)
            that.loadData()
            // 刷新多语言
            LocaleUtil.refreshLocale()
          } else {
            that.messageUtil.warning(res.message)
          }
        })
      },
      toDetail (appId) {
        this.showAppList = false
        this.appId = appId
      },
      toMain () {
        this.showAppList = true
      },
      editApp (item) {
        this.currOperGroupType = '2'
        this.$refs.modalForm.edit(item)
        this.$refs.modalForm.title = this.$t('m.common.button.update')
        this.$refs.modalForm.disableSubmit = false
      },
      delApp (id) {
        this.currOperGroupType = '2'
        const that = this
        deleteAction(that.url.delete, { id: id }).then((res) => {
          if (res.success) {
            that.messageUtil.success(res.message)
            //that.loadData();
            that.modalFormOk(null, null)
          } else {
            that.messageUtil.warning(res.message)
          }
        })
      },
      handleImportGroup (info) {
        if (info.file.status !== 'uploading') {
          //console.log(info.file, info.fileList)
        }
        if (info.file.status === 'done') {
          if (info.file.response.success) {
            if (info.file.response.code === 201) {
              let { message } = info.file.response
              this.messageUtil.warning(message)
            } else {
              this.messageUtil.success(info.file.response.message || `${info.file.name} `+this.$t('m.common.tip.file_upload_sucess') )
            }
            LocaleUtil.refreshLocale();
            this.loadData()
          } else {
            this.messageUtil.error(`${info.file.name} ${info.file.response.message}.`)
          }
        } else if (info.file.status === 'error') {
          this.messageUtil.error(this.$t('m.common.tip.file_upload_error') +`: ${info.file.msg} `)
        }
      },
      handleDelCache () {
        deleteAction(this.url.delCache).then((res) => {
          if (res.success) {
            this.messageUtil.success(res.message)
          } else {
            this.messageUtil.warning(res.message)
          }
        })
      },
    }
  }
</script>
<style lang="less" scoped>
  /deep/ .ant-tabs-nav .ant-tabs-tab {
    padding: 0px 16px 12px 16px !important;
  }
</style>
